<template>
  <div class="app-container">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :show-address-bar="true"
        :auto-location="true"
      />
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      <bm-panorama />
      
      <!-- Markers with click event -->
      <bm-marker
        v-for="(item, index) in mapData"
        :key="index"
        :position="{ lng: item.lng, lat: item.lat }"
        @click="showInfoWindow(item)"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-label
          :content="item.communityName"
          :label-style="{ color: 'red', fontSize: '9px' }"
          :offset="{ width: -25, height: 20 }"
        />
      </bm-marker>
      
      <!-- Info Window -->
      <bm-info-window
        :position="infoWindow.position"
        :show="infoWindow.show"
        @close="infoWindow.show = false"
        :title="infoWindow.title"
      >
        <div class="info-content">
          <img v-if="infoWindow.content.communityImg" :src="infoWindow.content.communityImg" class="community-img" />
          <div class="details">
            <p><strong>名称：</strong>{{ infoWindow.content.communityName }}</p>
            <p><strong>地址：</strong>{{ infoWindow.content.device }}</p>
            <p><strong>联系电话：</strong>{{ infoWindow.content.mobile }}</p>
          </div>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import { listCommunity } from "@/api/community/community";

export default {
  name: "Map",
  data() {
    return {
      listQuery: {
        gradeId: "",
      },
      center: {
        lng: 118.1819,
        lat: 24.4851,
      },
      zoom: 14,
      mapData: [],
      gradeList: [],
      infoWindow: {
        show: false,
        position: {
          lng: 0,
          lat: 0
        },
        title: '',
        content: {}
      }
    };
  },
  methods: {
    initMap({ BMap, map }) {
      this.center.lng =  118.1819;
      this.center.lat = 24.4851;
      this.zoom = 14;
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
      this.initData();
    },
    initData() {
      listCommunity().then((res) => {
        this.mapData = res.rows;
      });
    },
    showInfoWindow(item) {
      this.infoWindow.position = { lng: item.lng, lat: item.lat };
      this.infoWindow.title = item.communityName;
      this.infoWindow.content = item;
      this.infoWindow.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 500px;
}

.info-content {
  max-width: 250px;
  
  .community-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    margin-bottom: 8px;
  }
  
  .details {
    p {
      margin: 5px 0;
      line-height: 1.4;
      font-size: 12px;
      
      strong {
        color: #333;
      }
    }
  }
}
</style>